<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link href="/ui/pc/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/ui/bootstrapIcon/font/bootstrap-icons.min.css">
    <link href="/ui/pc/css/cross.css" rel="stylesheet"/>
    <link href="/ui/pc/css/change.css" rel="stylesheet"/>
    <link href="/ui/pc/css/style.css" rel="stylesheet"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated">
    <form data-form="search">
        <div class="audit-top">
            <span>关键字</span>
            <span class="input-select">
                <input type="text" name="titleLike" value="" placeholder="名称，手机号，邮箱模糊搜索"/>
            </span>

            <span class="ml-20">状态</span>
            <span data-select="disableFlag"></span>

            <a class="search-btn ml-20" href="javascript:" data-btn="search">搜索</a>
            <a class="search-btn ml-10 btn-line" href="javascript:" data-btn="addUser">新增用户</a>
        </div>
    </form>
    <div data-list="content" class="table-con  mt-20">

    </div>

</div>

<script src="/ui/pc/js/jquery.min.js?v=2.1.4"></script>
<script src="/admin/public/util.js"></script>
<script src="/admin/public/moment.js"></script>
<script src="/ui/pc/js/laydate/laydate.js"></script>

<!--图片上传两项-->
<link href="/ui/pc/js/lightbox/css/lightbox.min.css" rel="stylesheet"/>
<script src="/ui/pc/js/lightbox/js/lightbox.js"></script>
<script src="/admin/public/uploadFile.js"></script>
<script src="/admin/public/getUploadImgWidget.js"></script>

<script src="/admin/user/js/addUserDialog.js"></script>
<script src="/admin/user/js/updUserDialog.js"></script>
<script src="/admin/user/js/updUserPwdDialog.js"></script>
<script src="/admin/user/js/disableUserDialog.js"></script>
<script src="/admin/user/js/enabledUserDialog.js"></script>

<!--成员相关-->
<script src="/admin/user/js/memberListDialog.js"></script>
<script src="/admin/user/js/addMemberDialog.js"></script>
<script src="/admin/user/js/updMemberDialog.js"></script>
<script src="/admin/user/js/delMemberDialog.js"></script>
<script src="/admin/user/js/setDefaultMemberDialog.js"></script>

<script>
    const $searchForm = $('[data-form="search"]');
    const $listWarp = $('[data-list="content"]');

    const $disableFlagSel = $.getSelect("disableFlag", [
        {name: "请选择", value: ""},
        {name: "正常", value: 0},
        {name: "禁用", value: 1},
    ]);
    $searchForm.find('[data-select="disableFlag"]').replaceWith($disableFlagSel);

    const listHandler = $.commonList({
        $warp: $listWarp,
        column: [
            {title: "用户名", value: "userName"},
            {title: "手机", value: "phone"},
            {title: "邮箱", value: "email"},
            {title: "userId", value: "userId"},
            {title: "状态", value: ({disableFlag}) => disableFlag === 1 ? "禁用" : "正常"},
            {
                title: "操作", value: data => {
                    const {disableFlag} = data;
                    const $updBtn = $('<a href="javascript:" class="c-btn btn-blue m5">编辑</a>');
                    const $memberBtn = $('<a href="javascript:" class="c-btn btn-gray m5">成员</a>');
                    const $updPwdBtn = $('<a href="javascript:" class="c-btn btn-blue m5">修改密码</a>');
                    const $disableBtn = $('<a href="javascript:" class="c-btn btn-red m5">禁用</a>');
                    const $enabledBtn = $('<a href="javascript:" class="c-btn btn-red m5">启用</a>');

                    $updBtn.on("click", () => {
                        updUserDialog({
                            ...data,
                            callback() {
                                listHandler.getPage();
                            }
                        });
                    });

                    $memberBtn.on("click", () => {
                        memberListDialog({
                            userId: data.userId,
                            callback() {

                            }
                        })
                    });

                    $updPwdBtn.on("click", () => {
                        updUserPwdDialog({
                            ...data,
                            callback() {
                                listHandler.getPage();
                            }
                        });
                    })

                    $disableBtn.on("click", () => {
                        disableUserDialog({
                            ...data,
                            callback() {
                                listHandler.getPage();
                            }
                        });
                    });

                    $enabledBtn.on("click", () => {
                        enabledUserDialog({
                            ...data,
                            callback() {
                                listHandler.getPage();
                            }
                        });
                    })

                    //控制操作按钮
                    const $dom = $('<div></div>');
                    if (disableFlag === 1) {
                        $dom.append($enabledBtn);
                    } else {
                        $dom.append($updBtn);
                        $dom.append($memberBtn);
                        $dom.append($updPwdBtn);
                        $dom.append($disableBtn);

                    }

                    return $dom;
                }
            },
        ],
        dataSource: (currPage, callback) => {
            const param = $.getFormData($searchForm);
            param.pageIndex = currPage;
            param.pageSize = 10;
            queryUserPage(param, ({Code, Message, Result = [], Total}) => {
                if (Code !== 10000) {
                    return callback(Message, 0);
                }

                return callback(Result, Total, param.pageSize);
            });
        }
    });

    //搜索按钮
    $searchForm.find('[data-btn=search]').on("click", () => {
        listHandler.getPage(1);
    });

    //新增按钮
    $searchForm.find('[data-btn=addUser]').on("click", () => {
        addUserDialog(() => {
            listHandler.getPage(1);
        });
    });

    function queryUserPage(param, callback = Function()) {
        return $.sApi({
            data: param,
            url: "/api/User/queryUserPage"
        }, callback)
    }
</script>


</body>
</html>